<template>
    <BreadCrumb ref="breadCrumb" :item='item'></BreadCrumb>
    <!-- 外壳 -->
    <div class="common-wrapped">
        <!-- 内容 -->
        <div class="common-content">
            <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="账号详情" name="first">
                    <!-- 用户头像 -->
                    <!-- #region -->
                    <div class="account-info-wrapped">
                        <span>用户头像：</span>
                        <div class="account-info-cotent">
                            <el-upload class="avatar-uploader" action="http://127.0.0.1:3007/user/uploadAvatar"
                                :show-file-list="false" :before-upload="beforeAvatarUpload"
                                :on-success="handleAvatarSuccess">
                                <img v-if="useStore.image_url" :src="useStore.image_url" class="avatar" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </div>
                    </div>
                    <!-- endregion -->
                    <!-- 用户账号 -->
                    <div class="account-info-wrapped">
                        <span>用户账号：</span>
                        <div class="account-info-cotent">
                            <el-input v-model="useStore.account" disabled style="width: 240px"></el-input>
                        </div>
                    </div>

                    <!-- 用户密码 -->
                    <div class="account-info-wrapped">
                        <span>用户密码：</span>
                        <div class="account-info-cotent">
                            <el-button type="primary" @click="changePas">修改密码</el-button>
                        </div>
                    </div>

                    <!-- 用户姓名 -->
                    <div class="account-info-wrapped">
                        <span>用户姓名：</span>
                        <div class="account-info-cotent">
                            <el-input v-model="useStore.name" style="width: 240px"></el-input>
                        </div> 
                        <el-button type="primary">保存</el-button>
                    </div>

                    <!-- 用户性别 -->
                    <div class="account-info-wrapped">
                        <span>用户性别：</span>
                        <div class="account-info-cotent">
                            <el-select v-model="useStore.sex" placeholder="" style="width: 240px">
                                <el-option label="男" value="man" />
                                <el-option label="女" value="woman" />
                            </el-select>
                        </div>
                        <el-button type="primary">保存</el-button>
                    </div>

                    <!-- 用户身份 -->
                    <div class="account-info-wrapped">
                        <span>用户身份：</span>
                        <div class="account-info-cotent">
                            <el-input v-model="useStore.identity" disabled placeholder="用户身份"
                                style="width: 240px"></el-input>
                        </div>
                    </div>

                    <!-- 用户部门 -->
                    <div class="account-info-wrapped">
                        <span>用户部门：</span>
                        <div class="account-info-cotent">
                            <el-input v-model="useStore.department" disabled placeholder="用户部门"
                                style="width: 240px"></el-input>
                        </div>
                    </div>

                    <!-- 用户邮箱 -->
                    <div class="account-info-wrapped">
                        <span>用户邮箱：</span>
                        <div class="account-info-cotent">
                            <el-input v-model="useStore.email" placeholder="用户邮箱" style="width: 240px"></el-input>
                        </div>
                        <el-button type="primary">保存</el-button>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="公司信息" name="second">公司信息</el-tab-pane>
                <el-tab-pane label="首页管理" name="third">首页管理</el-tab-pane>
                <el-tab-pane label="其他设置" name="fourth">其他设置</el-tab-pane>
            </el-tabs>
        </div>
        <!-- <el-dialog v-model="isShow" class="changePasDialog"> -->
            <!-- 输入旧密码 -->
             <!-- <el-input placeholder="请输入旧密码"></el-input> -->
             <!-- 输入新密码 -->
              <!-- <el-input placeholder="请输入新密码"></el-input>
        </el-dialog> -->
        <ChangePs ref="psChange"></ChangePs>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus';
import BreadCrumb from '@/components/bread_crumb.vue'
import type { UploadProps } from 'element-plus'
import { useUserInfor } from '@/store/userinfor'
import { bindAccount } from '@/api/userinfor'
import ChangePs from './components/change_password.vue'

const psChange = ref()
const useStore = useUserInfor()
const isShow = ref(false)
const breadCrumb = ref()
// const AccountData = reactive({
//     account: '',
//     name: '',
//     sex: '',
//     identity: '',
//     department: '',
//     email: ''
// })
const item = ref({
    first: '系统设置'
})
const activeName = ref('first')
// 上传头像之前的回调
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('头像必须是JPG格式!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('头像的大小必须小于2M!')
        return false
    }
    return true
}
// 上传头像之后的回调
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
) => {
    // console.log(response)
    // imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    // useUsers.userInfor
    if (response.status == 0) {
        useStore.$patch({
            image_url: response.url
        })
        // console.log(useStore.imageUrl);
        ElMessage({
            message: '更新头像成功',
            type: 'success',
        });

        (async () => {
            const res = await bindAccount(useStore.account, response.onlyId, response.url)
            console.log(res)
        })()
    } else {
        ElMessage.error('更新头像失败!请重新上传')
    }
}
// 修改密码弹窗
const changePas = () => {
    // console.log(psChange.value.open);   
    
    psChange.value.open()
    
}


</script>



<style scoped lang="scss">
// 标签页
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.common-wrapped {
    background: #f5f5f5;
    padding: 8px;
    height: calc(100vh - 85px);

    .common-content {
        padding: 0 10px;
        height: 100%;
        background: #fff;

        // 账号信息外壳
        .account-info-wrapped {
            display: flex;
            align-items: center;
            padding-left: 50px;
            margin-bottom: 24px;
            font-size: 14px;

            // 账号信息内容
            .account-info-cotent {
                margin-left: 24px;
                margin-right: 30px;
            }
        }
    }
}

// 上传头像
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

// 修改密码弹窗
.changePasDialog {
    display: flex;
    .el-input {
        width: 260px;
        align-items: center
    };
}

</style>
<style>
/* 上传头像 */
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>